// $(function () {
    // 思路
    // 一. 输入框回车拿到 localStorage 里的数据
    // 代码
    // 1. 封装getData方法,只用于获取本地的数据,判单如果为null(空),返回以个[]
    // 2. 输入框绑定键盘事件,判断按下的编码数字是不是13,提取数据

    // 二.输入框回车,把对象存到本地
    // 代码
    // 1. 把值取出来转成对象,把对象放在数组里
    // 2. 再封装一个saveData方法,把数组转换成JSON字符串,转入localStorage

    // 三.把数据渲染到页面‘正在进行’的下面 (ol里面的li上)
    // >重要。数据和标签对应,数组里的对象要对应li这个标签
    // 代码
    // load函数方法里面
    // 1.把本地里的数组取出来,each遍历每个对象,为这个对象创建一套标签添加到ol里
    // 2.把每个a标签身上，添加了自定义属性id,值为index索引

    // 四. 实现删除功能
    // 代码
    // 1.点击事件绑定(事件委托)在ol/ul身上,触发未来生成的a标签身上
    // 2.点击事件方法里面,把本地数据取出来
    // 3.获取a身上的id索引
    // 4.拿到索引删除数组里的对象  数组.splice(index,1)
    // 5.最新的数组存到本地
    // 6.渲染页面

    // 五.点击状态
    // 代码
    // 1.获得索引.修改数组里下标签对于的对象done属性
    // 2.最新数据存到本地
    // 3.渲染页面 load

    //先把数据放到本地存储里面再加载到页面中
    // var todolist = [
    //     {
    //         title: '我今天吃八个馒头',
    //         done: false
    //     },
    //     {
    //         title: "我今天吃九个馒头",
    //         done: false
    //     },
    // ];
    // localStorage.setItem('todo', todolist)
    // //本地存储里面只存储字符串的数据格式  需要JSON.stringify()
    // localStorage.setItem('todo',JSON.stringify(todolist))
    // var data = localStorage.getItem('todo')
    // //获取本地存储的数据我们需要把里面的字符串数据转换成对象格式 JSON.parse()
    // data = JSON.parse(data)
    // // console.log(data);

    //当我按回车的时候触发函数
//     load();
//     $('#title').on('keydown', function (e) {
//         //如果按下的键的编码等于13
//         if (e.keyCode === 13) {
//             if ($(this).val()==="") {
//                 alert('请输入内容')
//             }
//             else{
//             //读取本地存储的数据
//             //申明一个值读取函数
//             var local = getData()
//             // console.log(local);
//             //把local数组更新  把最新的数据追加给local数组
//             local.push({ title: $(this).val(), done: false });
//             //把这个local数组存储的本地。更换
//             saveData(local);
//             //把本地存储的数据渲染到页面中
//             load();
//                 $(this).val("");
//             }
//         }
//     })
//     //点击删除
//     $('ol,ul').on('click', 'a', function () {
//         //先获取本地存储
//         var data = getData()
//         // console.log(data);
//         //修改数据
//         var index = $(this).attr('id')
//         // console.log(index);
//         //保存到本都存储
//         // 删除元素  splice(从哪个位置开始删除，删除几个元素)
//         data.splice(index, 1);
//         saveData(data);
//         //重新渲染
//         load();
//     })
//     //正在进行和已经完成的操作
//     $('ol,ul').on('click', 'input', function () {
//         //先获取本地数据
//         var data = getData()
//         //修改数据
//         //选择当前兄弟a 的ID号
//         var index = $(this).siblings('a').attr('id')
//         //当前done的结果等于这个input的结果为选取
//         // data[?].done = ?
//         data[index].done = $(this).prop('checked');
//         //保存到本地
//         saveData(data)
//         //重新渲染
//         load()
//     })
//         //再外面申明以个函数读取本都存储的数据
//     //为了取出这个对象的时候不为空所以先调用这个函数
//     function getData() {
//         var data = localStorage.getItem('todolist')
//         if (data !== null) {
//             //本地存储的数据是字符串格式的。我们需要的是对象格式
//             //如果有就调用
//             return JSON.parse(data);
//         }
//         else {
//             return [];
//         }
//     }
//     //保存本地存储数据
//     function saveData(data) {
//         localStorage.setItem('todolist',JSON.stringify(data))
//     }
//     //渲染加载数据
//     function load() {
//         var data = getData();
//         // console.log(data);
//         //遍历之前先要清空ol里面的元素
//         $('ol,ul').empty();
//         var num = 0;
//         var num1 = 0
//         //遍历数据
//         $.each(data, function (i,n) {
//             // console.log(n);
//             //遍历的输入的内容同时生成ol的小li添加进去
//             if (n.done) {
//                 $('ul').prepend('<li><input type="checkbox" checked="checked" ><p>' + n.title + '</p><a href="#" id=' + i + '></a></li>');
//                 num++;
//             } else {
//                 $('ol').prepend('<li><input type="checkbox" ><p>' + n.title + '</p><a href="#" id=' + i + '></a></li>');
//                 num1++
//             }
//         })
//         $("#todocount").text(num1);
//         $("#donecount").text(num);
//   }
// });
//先从数据库里看有没有数据。然后数据库里的数据取出来和新增加的数据放到一起再存到本地数据
//1.判断是否按了回车
$(function () {
    load();
    $('#title').on('keydown', function (e) {
        if (e.keyCode === 13) {
            // if ($(this).val() = '') {
            //     alert('重新输入')
            // }
            // alert(123)
            //拿到本地的数据。声明一个盒子装着
            var local = getDate();
            //3.把最新的数据追加给才取出来的数据里面local
            local.push({ title: $(this).val(), done: false });
            // 把这个local的数组存到本地.通过保存函数保存local这个最新的数据
            saveDate(local);
            load();
        }
    })
    //2.读取本地数据
    function getDate() {
        var data = localStorage.getItem('todolist');
        if (data !== null) {
            //本地存的数据都是字符串格式所以需要转换
            return JSON.parse(data);//转换成对象
        } else {
            return [];
        }
 }
    //4.保存本地数据
    function saveDate(data) {
        localStorage.setItem('todolist', JSON.stringify(data));
    }
    //5.load 渲染加载数据
    function load() {
        var data = getDate();
        //6.遍历之前要清空ol里的内容
        $('ol, ul').empty();
        $.each(data, function (i, n) {
            // console.log(n);
            //为了获取索引号。所以添加的时候增加一个i
            if (n.done) {
                $('ul').prepend('<li><input type="checkbox" checked="checked"><p>' + n.title + '</p><a href="javascript:;" id =' + i + '></a></li>')

            } else {
                $('ol').prepend('<li><input type="checkbox"><p>' + n.title + '</p><a href="javascript:;" id =' + i + '></a></li>')
           }
        });
    }
    $('ol, ul').on('click', 'a', function () {
        // alert(11)
        //7 先获取本地存储
        var data = getDate();
        //再修改数据。
        var index = $(this).attr('id')
        //利用splice选择从什么位置开始删除。删几个
        data.splice(index, 1);
        //将删除过后的数据保存到本地存储
        saveDate(data);
        //渲染页面
        load();
    })
    //8.判断是否选择
    $('ol, ul').on('click', 'input', function () {
        //读取数据
        var data = getDate();
        //根据之前确定的a的索引号来选取当前点击ipnut
        var index = $(this).siblings('a').attr('id');
        //读取数据里面的对应的第几个等于当前复选框的状态
        data[index].done = $(this).prop('checked');
        //保存
        saveDate(data);
        //渲染
        load()
    })
})